<template>
  <div class="list">
    <header>
      <van-sticky :offset-top="0">
        <div class="search">
          <van-icon name="arrow-left" color="#fff" @click="router.go(-1)" />
          <van-search
            v-model="seachVh"
            shape="round"
            background="#B0352F"
            placeholder="请输入你搜索喜欢的产品"
            clearable
            @focus="router.push('/home')"
          />

          <van-icon
            name="wap-home"
            color="#fff"
            @click="router.push('/home')"
          />
        </div>
      </van-sticky>
    </header>
    <section>
      <div class="list-l wrapperLeft" ref="wrapperLeft">
        <div class="content">
          <ul class="l-item">
            <li
              v-for="(item, index) in producListData"
              :key="index"
              @click="onSrcroll(index)"
              :class="{ active: currentIndex == index }"
            >
              {{ item.title }}
            </li>
          </ul>
        </div>
      </div>

      <div class="list-r wapperRight" ref="wapperRight">
        <div class="content">
          <ul
            class="shop-list"
            ref="ulDom"
            v-for="item in producListData"
            :key="item.id"
          >
            <li>
              <h2>{{ item.title }}</h2>
              <ul class="r-content">
                <li v-for="items in item.children" :key="items.id">
                  <img :src="items.imgUrl" alt="" />
                  <span>{{ items.name }}</span>
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup>
import {
  ref,
  reactive,
  onMounted,
  watchEffect,
  nextTick,
  getCurrentInstance,
  computed,
} from "vue";
import { useRouter } from "vue-router";
import http from "@/utils/index";
import BScroll from "better-scroll";

const BSLeft = ref(null);
const BSRight = ref(null);
let router = useRouter();
let seachVh = ref("");
let producListData = ref([]);
let wrapperLeft = ref(null);
let wapperRight = ref(null);
let scrollYData = ref(0); //右侧滚动距离
let allHeights = ref([]);

const instance = getCurrentInstance();

let currentIndex = computed(() => {
  return allHeights.value.findIndex((item, index) => {
    return (
      scrollYData.value >= item &&
      scrollYData.value < allHeights.value[index + 1]
    );
  });
});

onMounted(async () => {
  await nextTick(()=>{
     BSRight.value = new BScroll(wapperRight.value, {
    scrollY: true, //纵向滚动
    probeType: 3, //开启滚动事件

    click: true, //点击事件,默认false
    pullUpLoad: {
      //开启上拉加载
      threshold: -10, //设置上拉事件触发的距离
    },
    pullDownRefresh: {
      //开启下拉刷新
      stop: 30, //刷新时离顶部停留的距离
      threshold: 40, //设置下拉事件触发的距离
    },
  });
  // // 上拉加载
  // BSRight.value.on("pullingUp", () => {
  //   console.log("上拉加载更多");
  //   BSRight.value.finishPullUp(); //完成上拉加载事件，不写下次再拉就没反应了
  // });
  // //下拉刷新
  // BSRight.value.on("pullingDown", () => {
  //   console.log("上拉加载更多");
  //   BSRight.value.finishPullDown(); //完成下拉刷新事件，不写下次再拉就没反应了
  // });

  BSRight.value.on("scroll", (position) => {
    // console.log(); //打印y轴距离，是负数

    scrollYData.value = Math.abs(Math.ceil(position.y));
  });
  BSLeft.value = new BScroll(wrapperLeft.value, {
    probeType: 3,
    click: true,
  });
  calculateHeight();
  setTimeout(() => {
    BSRight.value.refresh();
    BSLeft.value.refresh();
  }, 1000);
  });


  producList();





});

let calculateHeight = () => {
  setTimeout(() => {
    let uls = instance.refs.wapperRight.getElementsByClassName("shop-list");
    let height = 0;
    allHeights.value.push(height);
    for (var i = 0; i < uls.length; i++) {
      let item = uls[i];

      height += item.clientHeight+9;
      allHeights.value.push(height);
    }
  }, 1000);
};

let producList = async () => {
  let res = await http.get("/Product/list");

  if (res.status == 10000) {
    producListData.value = res.data;

    //  console.log(res.data);
  }
};

let onSrcroll = (val) => {
  BSRight.value.scrollTo(0, -allHeights.value[val], 300);
};
</script>

<style lang="scss" scoped>
.list {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 90vh;
  overflow: hidden;
  // background-color: aqua;
  .search {
    display: flex;
    justify-content: space-around;
    background-color: #b0352f;
    align-items: center;
    span {
      font-size: 16px;
      color: #fff;
    }
    .van-search {
      width: 275px;
    }
  }
}
section {
 
  display: flex;
  flex: 1;
  height: 80vh;
  overflow: hidden;
  // margin-bottom: 100px;
}
.list-l {
  width: 93px;
  border-right: 1px solid #ccc;
  // height: 80vh;
  overflow: hidden;

  .l-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    width: 100%;

    li {
      width: 100%;

      margin: 15px 0;
      text-align: center;
      font-size: 18px;
      cursor: pointer;

      &.active {
        color: #b54f4a;
        border-left: 6px solid #b54f4a;
      }
    }
  }
}

.list-r {
  flex: 1;
  // height: 120vh;
  // overflow: hidden;

  .shop-list {
    text-align: center;
    overflow: hidden;
    // background-color: aqua;
    margin-bottom: 10px;
    h2 {
      padding: 20px 0;
      font-size: 24px;
      font-weight: 400;
    }
    .r-content {
      display: flex;
      flex-wrap: wrap;
      overflow: hidden;

      li {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 33.33%;

        // margin: 10px;
        padding: 5px 0;
        img {
          width: 53px;
        }
        span {
          font-size: 16px;
          margin-top: 5px;
        }
      }
    }
  }
}
</style>
<!-- BSLeft.value = new BScroll(".wrapperLeft", {
    scrollY: true, //纵向滚动
    mouseWheel: true, //可以用鼠标滚轮滚动
    // probeType: 3, //开启滚动事件
    click: true, //点击事件,默认false
    pullUpLoad: {
      //开启上拉加载
      threshold: -10, //设置上拉事件触发的距离
    },
    pullDownRefresh: {
      //开启下拉刷新
      stop: 10, //刷新时离顶部停留的距离
      threshold: 40, //设置下拉事件触发的距离
    },
  });

  BSLeft.value.on("pullingUp", () => {
    console.log("pullingUp- 上拉加载更多");
    BSLeft.value.finishPullUp(); //完成上拉加载事件，不写下次再拉就没反应了
  });
  //下拉刷新
  BSLeft.value.on("pullingDown", (val) => {
    console.log("pullingDown-下拉加载更多", val);
    BSLeft.value.finishPullDown(); //完成下拉刷新事件，不写下次再拉就没反应了
  });
  BSLeft.value.refresh(); //重新计算滚动盒子的宽高 -->

<!--   
  // BSRight.value.on("scroll", (position) => {
  //   console.log(Math.floor(position.y)); //打印y轴距离，是负数
  //   //   改为正数
  // }); -->
